<template>
	<div class='pageBox'>
		<div class="page-head"></div>
		<div class="page-body">
			<div class="page-body-grid grid-one">
				<div class="page-time flex ac jend">
					<div class="page-time-select">
						<el-date-picker class="date-picker-model" v-model="timeSelect" type="month" size="small"
							start-placeholder="请选择开始年份" end-placeholder="请选择结束年份" value-format="YYYY-MM"
							:clearable="false" @change="getTime" />
					</div>
				</div>
				<div class="grid-card-box flex jsb">
					<div class="grid-card-list" v-for="(item, index) in leftInfoData" :key="index"
					>
						<div class="card-list-top">
							<div class="card-list-title">{{ cardListTitle[index] }}</div>
							<el-tooltip class="box-item" effect="dark" :content="item.value?item.value:0" placement="top">
								<div class="card-list-unit flex jcc"><div>{{	item.value?item.value:0 }}</div><span>{{ index % 2 != 0 ? '万㎡' : '套' }}</span> </div>
							</el-tooltip>
						</div>
						<div class="card-list-segment"></div>
						<div class="card-list-bottom">
							<div class="card-list-rate" v-if="item.tb">
								<span class="card-rate-title">同比：</span>
								<img src="../../assets/img/fundAdminDataConverge/rateUp.png" alt="" v-if="item.tb >= 0">
								<img src="../../assets/img/fundAdminDataConverge/rateDown.png" alt="" v-else>
								<span class="card-rate-rate rate-green" v-if="item.tb >= 0">{{item.tb}}%</span>
								<span class="card-rate-rate rate-red" v-else>{{item.tb}}%</span>
							</div>
							<div class="card-list-rate" v-else>
								<span class="card-rate-title">同比：</span>
							</div>
							<div class="card-list-rate" v-if="item.hb">
								<span class="card-rate-title">环比：</span><img src="../../assets/img/fundAdminDataConverge/rateUp.png" alt="" v-if="item.hb >= 0">
								<img src="../../assets/img/fundAdminDataConverge/rateDown.png" alt="" v-else>
								<span class="card-rate-rate rate-green" v-if="item.hb >= 0">{{item.hb}}%</span>
								<span class="card-rate-rate rate-red" v-else>{{item.hb}}%</span>
							</div>
							<div class="card-list-rate" v-else>
								<span class="card-rate-title">环比：</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="map-box">
				<div class="map">
					<mapBox v-if="realEstateMiddleData.regions[0].length > 0"
						:housingSupplyStatsData="realEstateMiddleData" @mapNameChange="mapNameChange"
						style="height: 100%; width: 100%"></mapBox>
					<div class="map-address">辽宁省 {{ cityObj.cityName == "" ? "" : "-" + cityObj.cityName }}</div>
				</div>
			</div>
			<div class="page-body-grid grid-three flex">
				<div class="grid-three-left ">
					<div class="grid-three-xmCount">项目总数</div>
					<div class="grid-three-xmMoney">{{rightProTotal}}</div>
				</div>
				<div class="grid-three-right flex">
					<div class="grid-three-argement"></div>
					<div class="grid-three-right-info" >
						<div class="grid-three-right-top">
							<div class="grid-three-xmCount">监管账户余额</div>
							<el-tooltip class="box-item" effect="dark" :content="rightAdminBalance.value" placement="top">
								<div class="grid-three-xmMoney">{{ rightAdminBalance.value?rightAdminBalance.value:0 }}万元</div>
							</el-tooltip>
						</div>
						<div class="grid-three-right-bottom">
							<div class="card-list-rate" v-if="rightAdminBalance.tb">
								<span class="card-rate-title">同比：</span>
								<img	src="../../assets/img/fundAdminDataConverge/rateUp.png" alt="" v-if="rightAdminBalance.hb >= 0">
								<img	src="../../assets/img/fundAdminDataConverge/rateDown.png" alt="" v-else>
								<span	class="card-rate-rate rate-green" v-if="rightAdminBalance.hb >= 0">{{	rightAdminBalance.hb }}%</span>
								<span	class="card-rate-rate rate-red" v-else>{{	rightAdminBalance.hb }}%</span>
							</div>
							<div class="card-list-rate" v-else>
								<span class="card-rate-title">同比：</span>
							</div>
							<div class="card-list-rate"  v-if="rightAdminBalance.hb">
								<span class="card-rate-title">环比：</span>
								<img	src="../../assets/img/fundAdminDataConverge/rateUp.png" alt="" v-if="rightAdminBalance.tb >= 0">
								<img	src="../../assets/img/fundAdminDataConverge/rateDown.png" alt="" v-else>
								<span	class="card-rate-rate rate-green" v-if="rightAdminBalance.tb >= 0">{{	rightAdminBalance.tb }}%</span>
								<span	class="card-rate-rate rate-red" v-else>{{	rightAdminBalance.tb }}%</span>
							</div>
							<div class="card-list-rate" v-else>
								<span class="card-rate-title">环比：</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="page-body-grid pRelative">
				<div class="grid-title"><span>预售数据统计</span></div>
				<div class="echar-box h300" style="background: #031F3E">
					<barLinePublic v-if="advanceSaleDataStatisticsData.xAxisData.length > 0"
						:housingSupplyStatsData="advanceSaleDataStatisticsData" class="h300" @dialogData="dialogData">
					</barLinePublic>
				</div>
				<div class="time-tab">
					<div class="time-tab-index" :class="queryTypeYs == 1?'time-index-active':''" @click="queryTypeYsSet(1)">按年</div>
					<div class="time-tab-index" :class="queryTypeYs == 2?'time-index-active':''" @click="queryTypeYsSet(2)">按月</div>
				</div>
			</div>
			<div class="page-body-grid five">
				<div class="grid-title"><span>项目监管账户明细</span></div>
				<div class="list-data">
					<listData :scrollData="listScrollData" :listDataType="listDataType" @setCurrent="setCurrent" ></listData>
				</div>
			</div>
			<div class="page-body-grid pRelative">
				<div class="grid-title"><span>网签备案统计</span></div>
				<div class="echar-box h300" style="background: #031F3E">
					<barLinePublic v-if="netSignrecordStatisticsData.xAxisData.length > 0"
						:housingSupplyStatsData="netSignrecordStatisticsData" class="h300" @dialogData="dialogData">
					</barLinePublic>
				</div>
				<div class="time-tab">
					<div class="time-tab-index" :class="queryTypeWq == 1?'time-index-active':''" @click="queryTypeWqSet(1)">按年</div>
					<div class="time-tab-index" :class="queryTypeWq == 2?'time-index-active':''" @click="queryTypeWqSet(2)">按月</div>
				</div>
			</div>
			<div class="page-body-grid pRelative">
				<div class="grid-title"><span>各地监管账户余额统计</span></div>
				<div class="echar-box h300" style="background: #031F3E">
					<barLinePublic v-if="regionsBalanceAccountData.xAxisData.length > 0"
						:housingSupplyStatsData="regionsBalanceAccountData" class="h300" @dialogData="dialogData">
					</barLinePublic>
				</div>
			</div>
		</div>
		<magnify v-if="magnifyEchartData" :housingSupplyStatsData="magnifyEchartData"  @closeDialog="closeDialog">
		</magnify>
	</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { barLineParamsData } from "@/utils/chartsPbulic";
import magnify from "@/components/public/magnify.vue";
import barLinePublic from "@/components/fundAdminDataConverge/barLinePbulic.vue";
import mapBox from "@/components/fundAdminDataConverge/map.vue";
import listData from '@/components/fundAdminDataConverge/listData.vue';
import { getCityName } from '@/utils/cityList'
import {
	getBaseDataStatistics,
	getYsDataStatistics,
	getWqDataStatistics,
	getSupervisionAccountStatistics,
	getProSupervisionAccount,
} from '@/api/fundAdminDataConverge'

import {
	selectThermodynamic,
} from '@/api/eachAdmin'

const timeSelect = ref<any>(null)//当前时间
const leftInfoData = ref<any>([])//左侧项目详细信息
const rightProTotal = ref(0)//右侧项目总数
const rightAdminBalance = ref({
	value:0,
	tb:0,
	hb:0,
})//右侧项目余额
const cardListTitle = ref<any>(['预售套数', '预售面积', '网签套数', '网签面积',])//卡片列表标题
const queryTypeWq = ref(1)
const queryTypeYs = ref(1)
const current = ref(1)
const size = ref(20)
const listDataType = ref(1)
const magnifyEchartData = ref(null)//弹框
const cityObj = ref({
	cityName: "",
	cityCode: "",
});
const fixedCityCode = localStorage.getItem("cityCode")

const advanceSaleDataStatisticsData = ref({//预售数据统计
	xAxisData: <any>[],
})
const netSignrecordStatisticsData = ref({//预售数据统计
	xAxisData: <any>[],
})
const regionsBalanceAccountData = ref({//各地监管账户余额统计
	xAxisData: <any>[],
})
const listScrollData = ref({})
const realEstateMiddleData = ref({//地图
	regions: [[]],
});

//获取当前年月
const initiaTime = () => {
	const now = new Date();
	let year = now.getFullYear()
	let month: any = now.getMonth() + 1;
	if (month <= 9) {
		month = '0' + month;
	}
	timeSelect.value = year + '-' + month;
}
//顶部数据统计
const baseDataStatistics = async() =>{
	// leftInfoData.value = []
	let { data } = await getBaseDataStatistics({ cityCode: cityObj.value.cityCode,queryDate:timeSelect.value })
	let datas = []
	for(let i = 0; i < 4; i++){
		datas.push(data[i])
	}
	leftInfoData.value  = datas
	rightProTotal.value = data[4].value
	rightAdminBalance.value = data[5]
}
//预售数据统计
const advanceSaleDataStatistics = async () => {
	let { data } = await getYsDataStatistics({cityCode: cityObj.value.cityCode,queryType:queryTypeYs.value})
	let legendStyle = {
		show: true,
		icon: "",
		left: 10,
		top: 8,
		itemWidth: 29,
		itemHeight: 7,
		itemGap: 7,
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 50,
		top: 70,
	};
	let paramsData = barLineParamsData(
		['套数', '面积'],
		data.xAxis,
		[
			{
				name: "套数",
				type: "1",
			},
			{
				name: "面积/万m²",
				type: "2",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			}
		],
		[
			data.ts,
			data.mj
		],
		[
			{
				a: "#E4871D",
				b: "#E4871D",
			}, {
				a: "#4A6FE3",
				b: "#4A6FE3",
			},

		],
		legendStyle,
		gridConfig
	);
	advanceSaleDataStatisticsData.value = paramsData;
}
//网签备案统计
const netSignrecordStatistics = async () => {
	let { data } = await getWqDataStatistics({cityCode: cityObj.value.cityCode,queryType:queryTypeWq.value})
	let legendStyle = {
		show: true,
		icon: "",
		left: 10,
		top: 8,
		itemWidth: 29,
		itemHeight: 7,
		itemGap: 7,
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 50,
		top: 70,
	};
	let paramsData = barLineParamsData(
		['套数', '面积'],
		data.xAxis,
		[
			{
				name: "套数",
				type: "1",
			},
			{
				name: "面积/万m²",
				type: "2",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			}
		],
		[
			data.ts,
			data.mj
		],
		[
			{
				a: "#E4871D",
				b: "#E4871D",
			}, {
				a: "#4A6FE3",
				b: "#4A6FE3",
			},

		],
		legendStyle,
		gridConfig
	);
	netSignrecordStatisticsData.value = paramsData;
}
//各地监管账户余额统计
const regionsBalanceAccount = async () => {
	let { data } = await getSupervisionAccountStatistics({ cityCode: cityObj.value.cityCode })
	let legendStyle = {
		show: true,
		icon: "",
		left: 10,
		top: 0,
		itemWidth: 29,
		itemHeight: 7,
		itemGap: 7,
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['', ''],
		data.xAxis,
		[
			{
				name: "金额(万元)",
				type: "1",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.yAxis
		],
		[
			{
				a: "#55BBEB",
				b: "#074083",
			},

		],
		legendStyle,
		gridConfig
	);
	regionsBalanceAccountData.value = paramsData;
}
//项目监管账户明细
const proSupervisionAccount = async (i) => {
	let { data } = await getProSupervisionAccount({ cityCode: cityObj.value.cityCode,current:current.value,size:size.value })
	listScrollData.value = data
	listDataType.value = i

}
//列表组件返回参数
const setCurrent = (i: any) => {
	current.value = i+1
	proSupervisionAccount(2)
}
//预售数据选择年月
const queryTypeYsSet = (i:number) => {
	queryTypeYs.value = i
	advanceSaleDataStatistics()
}
//网签数据选择年月
const queryTypeWqSet = (i:number) => {
	queryTypeWq.value = i
	netSignrecordStatistics()
}
// 地图
const realEstateMiddle = async () => {
	let { data } = await selectThermodynamic({ adcode: cityObj.value.cityCode});
	let inventoryRegionDTOS = data.map((item: any) => ({
		name: item.cityName,
		value: [item.houseCount, item.peopleCount],
		code: item.cityCode,
		selected: fixedCityCode == item.cityCode ? true : false
	}));

	let seriesData = [inventoryRegionDTOS];
	let paramsData = {
		regions: seriesData,
	};
	realEstateMiddleData.value = paramsData
}
// 获取城市名
const mapNameChange = (e) => {
	console.log(e)
	if (cityObj.value.cityName == e.cityName) {
		cityObj.value = {
			cityName: "",
			cityCode: "210000",
		};
		current.value = 1
		allFun();
	} else {
		cityObj.value = e;
		current.value = 1
		allFun();
	}
}
//获取时间
const getTime = () => {
	baseDataStatistics()
}
// 打开弹框
const dialogData = (val) => {
	magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
	magnifyEchartData.value = null
}
const allFun = () => {
	realEstateMiddle()
	baseDataStatistics()
	advanceSaleDataStatistics()
	netSignrecordStatistics()
	regionsBalanceAccount()
	proSupervisionAccount(1)
}
onMounted(() => {
	cityObj.value = getCityName(fixedCityCode)
	initiaTime()
	allFun()
})
</script>
<style scoped lang='less'>
@img1:'@/assets/img/fundAdminDataConverge/cardListBg1.png';
@img2:'@/assets/img/fundAdminDataConverge/cardListBg2.png';
@img3:'@/assets/img/fundAdminDataConverge/cardListBg3.png';
@img4:'@/assets/img/fundAdminDataConverge/cardListBg4.png';


.pageBox {
	width: 100vw;
	height: 100vh;
	background-image: url("@/assets/img/fundAdminDataConverge/pageBg.png");
	background-size: 100% 100%;
	overflow: auto;
	color: #FFFFFF;

	// 隐藏滚动条
	&::-webkit-scrollbar {
		width: 0px;
	}

	.page-head {
		background-image: url("@/assets/img/fundAdminDataConverge/headBg.png");
		background-size: 100% 100%;
		width: 100vw;
		height: 85px;
	}

	.page-body {
		width: 100vw;
		height: calc(100vh - 96px);
		display: flex;
		padding: 0px 30px;
		padding-bottom: 60px;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 597px 635px 597px;
		grid-template-rows: 211px 342px 342px;
		grid-gap: 21px 18px;

		.grid-one {
			.page-time {
				height: 37px;
			}

			.grid-card-box {
				.grid-card-list:nth-child(1){
					background-image: url(@img1);
				}
				.grid-card-list:nth-child(2){
					background-image: url(@img2);
				}
				.grid-card-list:nth-child(3){
					background-image: url(@img4);
				}
				.grid-card-list:nth-child(4){
					background-image: url(@img4);
				}
				
				.grid-card-list {
					width: 134px;
					height: 174px;
					background-size: 100% 100% !important;
					background-repeat: no-repeat;
					.card-list-top {
						margin-top: 70px;
						text-align: center;

						.card-list-title {
							font-weight: 400;
							font-size: 14px;
							color: #B4D6FB;
						}

						.card-list-unit {
							font-weight: 900;
							font-size: 20px;
							background: linear-gradient(to bottom, #FFFFFF 0%, #E38319 100%);
							-webkit-background-clip: text;
							/* 将背景应用到文字上 */
							-webkit-text-fill-color: transparent;
							/* 隐藏文字的实际颜色 */
							div{
								max-width: 80px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
							div:hover{
								cursor: pointer;
							}
						}
					}

					.card-list-segment {
						margin-top: 5px;
						height: 3px;
						background: url('@/assets/img/fundAdminDataConverge/cardListBgSegment.png');
						background-size: 100% 100%;
					}

					.card-list-bottom {
						margin-left: 23px;
						margin-top: 4px;
						height: 38px;

						.card-list-rate {
							height: 20px;
							display: flex;

							.card-rate-title {
								font-weight: 400;
								font-size: 12px;
								color: #B4D6FB;
							}

							img {
								width: 21px;
								height: 100%;
							}

							.card-rate-rate {
								font-weight: 400;
								font-size: 12px;
							}

						}
					}
				}
			}
		}

		.grid-three {
			padding-top: 37px;

			.grid-three-left {
				width: 186px;
				height: 174px;
				background: url('@/assets/img/fundAdminDataConverge/cardThreeLeftBg.png');
				background-size: 100% 100%;
				padding-top: 110px;
				text-align: center;
			}

			.grid-three-right {
				margin-left: 26px;
				width: 384px;
				height: 174px;
				background: url('@/assets/img/fundAdminDataConverge/cardThreeRightBg.png');
				background-size: 100% 100%;
				text-align: center;

				.grid-three-argement {
					margin-left: 211px;
					width: 3px;
					height: 100%;
					background: url('@/assets/img/fundAdminDataConverge/cardThreeSegment.png');
					background-size: 100% 100%;
				}

				.grid-three-right-info {
					width: 170px;
					padding-top: 34px;
					text-align: center;

					.grid-three-xmMoney {
						margin-top: 5px;
						max-width:100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.grid-three-right-bottom {
						padding-left: 32px;
						margin-top: 12px;

						.card-list-rate {
							height: 18px;
							display: flex;

							.card-rate-title {
								font-weight: 400;
								font-size: 12px;
								color: #B4D6FB;
							}

							img {
								width: 21px;
								height: 100%;
							}

							.card-rate-rate {
								font-weight: 400;
								font-size: 12px;
								color: #5CC40C;
							}
						}

						.card-list-rate:last-child {
							margin-top: 8px;
						}
					}
				}
			}

			.grid-three-xmCount {
				font-weight: 400;
				font-size: 14px;
				color: #B4D6FB;
			}

			.grid-three-xmMoney {
				font-weight: 800;
				font-size: 20px;
				background: linear-gradient(to bottom, #FFFFFF 0%, #E38319 100%);
				-webkit-background-clip: text;
				/* 将背景应用到文字上 */
				-webkit-text-fill-color: transparent;
				/* 隐藏文字的实际颜色 */
			}
		}

		.map-box {
			grid-column: 2 / 3;
			grid-row: 1 / 3;
			padding-top: 136px;
			position: relative;

			.map {
				width: 635px;
				height: 389px;
			}

			.map-address {
				position: absolute;
				top: 111px;
				left: 23px;
				letter-spacing: 1px;
				text-shadow: 0px 1px 2px #c1731c;
				font-size: 18px;
				color: #60f9f4;
				letter-spacing: 1.2px;
				margin-left: 27px;
			}

			.map-address::before {
				content: "";
				position: absolute;
				top: 2px;
				left: -27px;
				width: 20px;
				height: 20px;
				background: url("@/assets/img/personInfor/map-address.png");
				background-size: 100% 100%;
			}
		}

		.five {
			grid-column: 3 / 3;
			grid-row: 2 / 4;

			.list-data {
				width: 100%;
				height: calc(100% - 43px);
			}
		}

		.page-body-grid {
			.grid-title {
				width: 100%;
				height: 39px;
				background: url('@/assets/img/fundAdminDataConverge/gridTitleBg.png');
				background-size: 100% 100%;
				padding-left: 20px;
				display: flex;
				align-items: center;
				margin-bottom: 6px;

				span {
					font-weight: 400;
					font-size: 20px;
					background: linear-gradient(to bottom, rgba(255, 255, 255, 0.87) 0%, rgba(87, 150, 225, 0.87) 100%);
					-webkit-background-clip: text;
					/* 将背景应用到文字上 */
					-webkit-text-fill-color: transparent;
					/* 隐藏文字的实际颜色 */
				}
			}

			.rate-green{
					color: #5CC40C !important;
				}
				.rate-red{
					color:rgba(196, 30, 12, 1) !important;
				}
		}

		.time-tab {

			position: absolute;
			display: flex;
			right: 10px;
			bottom: 10px;

			.time-tab-index {
				width: 38px;
				height: 18px;
				background: rgba(0, 43, 79, 0.4);
				border-radius: 3px 3px 3px 3px;
				border: 1px solid #28FCFF;
				font-weight: 400;
				font-size: 12px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.time-index-active{
				color: #28FCFF;
			}
			.time-tab-index:last-child {
				margin-left: 6px;
			}

			.time-tab-index:hover {
				cursor: pointer;
			}
		}
	}
}

.pRelative {
	position: relative;
}

.h300 {
	height: 300px;
}

/deep/ .page-time-select .el-date-editor.el-input, .el-date-editor.el-input__wrapper {
	width: 89px;
	height: 16px;


	.el-input__wrapper {
		background: rgba(27, 126, 242, 0.2);
		border: 1px solid #29F0FA;
		box-shadow: inset 0px 0px 2px 0px #29F0FA;
		border-radius: 0px;

		.el-input__inner {
			font-size: 12px;
			color: #D7DDE2;
		}

		.el-range-input,
		.el-range-separator {
			font-size: 12px;
			color: #D7DDE2;
		}
	}
}

:deep(.el-date-editor) {
	opacity: 1;
}
</style>
